<!-- 自定义轮播图组件 -->
<template>
  <div class="carousel" @mouseenter="enter" @mouseleave="leave">
    <!-- 轮播图部分 -->
    <div class="inner">
      <slot></slot>
    </div>

    <!-- 左右的切换箭头 -->
    <transition name="animArrow">
      <div class="left_arrow" v-if="isShowArrow" @click="goPrePage">
        <!-- <el-icon :size="14" color="#fff">
          <ArrowLeft />
        </el-icon> -->
        <i
          class="iconfont ui-zuojiantou"
          :style="{ color: `#fff`, fontSize: `18px` }"
        ></i>
      </div>
    </transition>

    <transition name="animArrow">
      <div class="right_arrow" v-if="isShowArrow" @click="goNextPage">
        <!-- <el-icon :size="14" color="#fff">
          <ArrowRight />
        </el-icon> -->
        <i
          class="iconfont ui-dibudaohanglan-"
          :style="{ color: `#fff`, fontSize: `18px` }"
        ></i>
      </div>
    </transition>

    <!-- 指示器部分 -->
    <div class="indicator">
      <div
        class="item_point"
        v-for="(item, index) in length"
        :key="index"
        :style="{ backgroundColor: currentIndex == index ? color : '#fff' }"
        @click="onItemClick(index)"
      ></div>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, onBeforeUnmount, onMounted } from "vue";
export default {
  name: "carousel",
  components: {},
  props: {
    //是否自动轮播
    autoPlay: {
      type: Boolean,
      default: true,
    },

    //轮播的时长
    druation: {
      type: Number,
      default: 2000,
    },

    //初始进入显示的图片位置
    initializeIndex: {
      type: Number,
      default: 0,
    },

    //指示器的选中颜色
    color: {
      type: String,
      default: "#FDFD06",
    },
  },

  setup(props) {
    //定义初始化的显示位置
    let currentIndex = ref(props.initializeIndex);

    //是否显示左右切换按钮
    let isShowArrow = ref(false);

    //定义滚动的放啊发
    let scrollDirection = ref("next");

    //获取轮播图的长度的方法
    const getLength = () => {
      let res = 0;
      let defaultArr = getCurrentInstance().slots.default();
      if (defaultArr != null && Array.isArray(defaultArr)) {
        //存在并且是数组
        for (let i = 0; i < defaultArr.length; i++) {
          let children = defaultArr[i].children;
          if (children && Array.isArray(children)) {
            res = children.length;
            break;
          }
        }
      }
      return res;
    };

    //定时器对象
    let t = null;

    //获取轮播图的长度,主要是通过getCurrentInstance().slots.default()方法
    let length = getLength();

    //定义的轮播的方法
    const autoPlay = (direction) => {
      if (!props.autoPlay) {
        return;
      }
      clearTimer();
      t = setInterval(() => {
        setIndex(direction);
      }, props.druation);
    };

    //同步当前显示的索引值
    const setIndex = (direction) => {
      switch (direction) {
        case "next":
          //下一张
          currentIndex.value += 1;
          if (currentIndex.value === length) {
            //处理越界
            currentIndex.value = 0;
          }
          break;
        case "pre":
          //上一张
          currentIndex.value -= 1;
          if (currentIndex.value == -1) {
            //处理越界
            currentIndex.value = length - 1;
          }
          break;
        default:
          break;
      }
    };

    //清除定时器的方法
    const clearTimer = () => {
      if (t) {
        clearInterval(t);
        t = null;
      }
    };

    //鼠标移入的方法
    const enter = () => {
      clearTimer();
      isShowArrow.value = true;
    };

    //鼠标移出的方法
    const leave = () => {
      isShowArrow.value = false;
      scrollDirection.value = "next";
      autoPlay(scrollDirection.value);
    };

    onMounted(() => {
      //开启切换
      autoPlay(scrollDirection.value);
    });

    onBeforeUnmount(() => {
      clearTimer();
    });

    //上一页
    const goPrePage = () => {
      scrollDirection.value = "pre";
      setIndex(scrollDirection.value);
    };

    //下一页
    const goNextPage = () => {
      scrollDirection.value = "next";
      setIndex(scrollDirection.value);
    };

    //指示器的点击事件
    const onItemClick = (index) => {
      if (currentIndex.value != index) {
        if (index > currentIndex.value) {
          //后面的
          scrollDirection.value = "next";
        } else {
          //前面的页面
          scrollDirection.value = "pre";
        }
        currentIndex.value = index;
      }
    };

    return {
      currentIndex,
      length,
      isShowArrow,
      scrollDirection,
      setIndex,
      enter,
      leave,
      onItemClick,
      goPrePage,
      goNextPage,
    };
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "iconfont";
  src: url("//at.alicdn.com/t/c/font_4549440_5xojuxsid7p.woff2?t=1715827792533")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_4549440_5xojuxsid7p.woff?t=1715827792533")
      format("woff"),
    url("//at.alicdn.com/t/c/font_4549440_5xojuxsid7p.ttf?t=1715827792533")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &.ui-dibudaohanglan-:before {
    content: "\e62d";
  }

  &.ui-zuojiantou:before {
    content: "\e617";
  }
}

.carousel {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;

  .left_arrow,
  .right_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba($color: #000000, $alpha: 0.2);
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .left_arrow {
    left: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    padding-right: 8px;
  }
  .right_arrow {
    right: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding-left: 8px;
    padding-right: 4px;
  }

  .animArrow-enter-active,
  .animArrow-leave-active {
    transition: opacity 0.5s ease;
  }

  .animArrow-enter-from,
  .animArrow-leave-to {
    opacity: 0;
  }

  .animArrow-enter-to,
  .animArrow-leave-from {
    opacity: 1;
  }

  //指示器部分
  .indicator {
    border-radius: 30px;
    padding: 8px 12px;
    background-color: rgba($color: #000000, $alpha: 0.3);
    position: absolute;
    display: flex;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    gap: 10px;
    .item_point {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      cursor: pointer;
    }
  }
}
</style>
